<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的插值语法</title>
  </head>

  <body>
    <!-- 
     模板语法：
       一.插值语法
         功能：用于解释标签体语法
         写法：{{XXXX}},xxx作为表达式去解析，且可以自动读取到data里的内容
       二.指令语法
         功能：用于解析标签（标签属性，标签体内容，绑定事件...）
         举例：v-bind:href="xxxx"
     -->
    <div id="root">
      <h2>模板语法</h2>
      <h4>{{msg}}</h4><!-- 插值语法 -->
      <h4>{{msg.toUpperCase()}}</h4>
      <h2>指令语法</h2>
      <h4><a v-bind:href="bUrl">百度</a></h4>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#root",
      data: {
        msg: "你好，atguigu",
        bUrl: "https://www.baidu.com"
      }
    })
  </script>

</html>